<template lang="pug">
data-page(
  v-bind="pageParams"
)
  mt-table(
    v-bind="tableProps"
  )

  edit-form(
    v-bind="editFormProps"
  )
</template>

<script setup lang="ts" name="equipment">
import {
  type FormItemProps,
  type IAction,
  type DataPageProps,
  type Action,
  type EditFormProps,
  type TableProps,
  useNotify,
} from "@scmt/common-components";
import { useRequest } from "@scmt/common-hooks";
import { type QueryPagination, useApi } from "@scmt/core-api";
import type {
  CheckEquipmentEntity,
  CheckEquipmentQueryParams,
} from "@scmt/api-pacs-check-equipment";
//定义传递equipmentId事件
const emi = defineEmits(["getEquipmentId"]);
const $api = useApi();
const $notify = useNotify();
const queryPramas = reactive<CheckEquipmentQueryParams>({
  name: "",
  pageNum: 1,
  pageSize: 20,
});
const editingObj = ref<null | CheckEquipmentEntity>(null);
const selectEquipment = defineModel();
const { request, data, loadingMap } = useRequest({
  tableData: (q: any) => {
    const params = Object.assign({}, queryPramas, q);
    return $api.pacs.checkEquipment.query(params);
  },
  save: (model: CheckEquipmentEntity) => {
    loadingMap.save = true;
    return $api.pacs.checkEquipment.save(model).then(() => {
      $notify.success("保存成功");
      editingObj.value = null;
      loadingMap.save = false;
      request("tableData", {
        pageSize: 20,
      });
    });
  },
  destroy: (ids: string) => {
    return $api.pacs.checkEquipment.destroy(ids).then(() => {
      $notify.success("删除成功");

      request("tableData", {
        pageSize: 20,
      });
    });
  },
});

onMounted(() => {
  request("tableData");
});

const pageParams = computed<DataPageProps>(() => {
  const queryFields: FormItemProps[] = [
    {
      prop: "deviceName",
      label: "设备名称",
    },

    {
      prop: "inspectionTypeId",
      label: "检查类型",
      as: "select",
      options: {
        loadMethod: $api.pacs.inspectionType.listAsOptions,
      },
    },
  ];

  const headerActions: Action[] = ["add"];

  const dataPageProps: DataPageProps = {
    loading: loadingMap.tableData,
    queryModel: queryPramas,
    queryFields,
    actions: headerActions,
    onQuery: () => request("tableData"),
    onAct: onPageActions,
    columns: 3,
  };

  return dataPageProps;
});

const tableProps = computed(() => {
  const { tableData } = toRefs(data);

  const tableProps: TableProps = {
    loading: loadingMap.tableData,
    data: tableData.value?.items,
    pagination: tableData.value?.pagination,
    columns: [
      {
        type: "index",
        label: "序号",
        width: "60px",
      },
      {
        prop: "deviceName",
        label: "设备名称",
        tooltip: true,
        minWidth: "120px",
      },
      // {
      //   prop: "deviceIp",
      //   label: "设备ip",
      //   tooltip: false,
      //   minWidth: "120px",
      // },
      // {
      //   prop: "port",
      //   label: "端口",
      //   tooltip: false,
      //   minWidth: "120px",
      // },
      // {
      //   prop: "aeWorklist",
      //   label: "AE(worklist)",
      //   tooltip: true,
      //   minWidth: "120px",
      // },
      // {
      //   prop: "aeImage",
      //   label: "AE(image)",
      //   tooltip: true,
      //   minWidth: "120px",
      // },

      // {
      //   prop: "instrumentName",
      //   label: "仪器名称",
      //   tooltip: true,
      //   minWidth: "120px",
      // },
      {
        prop: "officeName",
        label: "科室名称",
        tooltip: true,
        minWidth: "120px",
      },
      // {
      //   prop: "roomName",
      //   label: "房间名称",
      //   tooltip: true,
      //   minWidth: "120px",
      // },
      // {
      //   prop: "checkNumberRules",
      //   label: "检查号规则",
      //   tooltip: true,
      //   minWidth: "120px",
      // },
      // {
      //   prop: "patientNumberRules",
      //   label: "病人号规则",
      //   tooltip: true,
      //   minWidth: "120px",
      // },
      {
        prop: "inspectionType",
        label: "检查类型",
        tooltip: true,
        minWidth: "120px",
      },

      // {
      //   prop: "reportStyle",
      //   label: "报告样式",
      //   tooltip: true,
      //   minWidth: "120px",
      // },

      // {
      //   prop: "registrationBarStyle",
      //   label: "登记条样式",
      //   tooltip: true,
      //   minWidth: "120px",
      // },

      // {
      //   prop: "barcodeStyle",
      //   label: "条码样式",
      //   tooltip: true,
      //   minWidth: "120px",
      // },
      // {
      //   prop: "patientNumberUsageRules",
      //   label: "病人号使用规则",
      //   tooltip: true,
      //   minWidth: 150,
      // },
      // {
      //   prop: "typesMedicalItems",
      //   label: "医嘱项目类型",
      //   tooltip: true,
      //   minWidth: 150,
      // },
      {
        prop: "enable",
        label: "是否启用",
        minWidth: 120,
        render: (params) => {
          return h(resolveComponent("mt-switch"), {
            modelValue: params.row.enable == 1 ? true : false,
            "onUpdate:modelValue": (val: string) => {
              request("save", Object.assign({}, params.row, { enable: val }));
            },
          });
        },
      },
      {
        prop: "sortNumber",
        label: "排序号",
        tooltip: false,
        minWidth: "120px",
      },
      {
        prop: "createTime",
        label: "创建时间",
        tooltip: true,
        minWidth: "120px",
        format: "datetime",
      },
      {
        label: "操作",
        fixed: "right",
        width: "150px",
        actions: ["edit", "destroy"],
      },
    ],
    onAct: onPageActions,
    onPaginate: (pagination: QueryPagination) =>
      request("tableData", pagination),
    onRowClick: (row: any) => {
      selectEquipment.value = row;
    },
  };
  return tableProps;
});

const editFormProps = computed<EditFormProps>(() => {
  const formItems: FormItemProps[] = [
    {
      prop: "deviceName",
      label: "设备名称",
      required: true,
    },
    // {
    //   prop: "deviceIp",
    //   label: "设备ip",
    //   required: true,
    // },
    // {
    //   prop: "port",
    //   label: "端口",
    //   required: true,
    // },
    // {
    //   prop: "aeWorklist",
    //   label: "AE(worklist)",
    //   required: true,
    // },
    // {
    //   prop: "aeImage",
    //   label: "AE(image)",
    //   required: true,
    // },
    {
      prop: "sortNumber",
      label: "排序号",
      required: true,
      as: "input-number",
      options: {
        min: 0,
      },
    },
    // {
    //   prop: "instrumentName",
    //   label: "仪器名称",
    //   required: true,
    // },
    {
      prop: "officeId",
      label: "科室名称",
      labelKey: "officeName",
      required: true,
      as: "select",
      options: {
        render: "office-table",
        loadMethod: $api.upms.org.listAsOptions,
      },
    },
    // {
    //   prop: "roomId",
    //   label: "房间名称",
    //   required: true,
    //   labelKey: "roomName",
    // },
    // {
    //   prop: "checkNumberRulesId",
    //   label: "检查号规则",
    //   labelKey: "checkNumberRules",
    //   required: true,
    //   as: "select",
    //   options: {
    //     loadMethod: $api.pacs.encodingRules.listAsOptions,
    //   },
    // },
    // {
    //   prop: "patientNumberRulesId",
    //   label: "病人号规则",
    //   labelKey: "patientNumberRules",
    //   required: true,
    //   as: "select",
    //   options: {
    //     loadMethod: $api.pacs.encodingRules.listAsOptions,
    //   },
    // },

    {
      prop: "inspectionTypeId",
      label: "检查类型",
      labelKey: "inspectionType",
      required: true,
      as: "select",
      options: {
        loadMethod: $api.pacs.inspectionType.listAsOptions,
      },
    },
    {
      prop: "reportStyleId",
      label: "报告样式",
      labelKey: "reportStyle",
      required: false,
      as: "select",
      options: {
        loadMethod: () => $api.bdm.template.listAsOptions(),
      },
    },
    // {
    //   prop: "registrationBarStyleId",
    //   label: "登记条样式",
    //   labelKey: "registrationBarStyle",
    //   required: false,
    //   as: "select",
    //   options: {
    //     loadMethod: () =>
    //       $api.dict.item.listAsOptions("registration_bar_style"),
    //   },
    // },

    // {
    //   prop: "barcodeStyleId",
    //   label: "条码样式",
    //   required: false,
    //   labelKey: "barcodeStyle",
    //   as: "select",
    //   options: {
    //     loadMethod: () =>
    //       $api.dict.item.listAsOptions("registration_bar_style"),
    //   },
    // },
    // {
    //   prop: "patientNumberUsageRulesId",
    //   labelKey: "patientNumberUsageRules",
    //   label: "病人号使用规则",
    //   required: false,
    //   as: "select",
    //   options: {
    //     loadMethod: () =>
    //       $api.dict.item.listAsOptions("patient_number_usage_rules"),
    //   },
    // },
    // {
    //   prop: "typesMedicalItems",
    //   label: "医嘱项目类型",
    //   required: true,
    //   as: "select",
    //   options: {
    //     loadMethod: $api.pacs.encodingRules.listAsOptions,
    //   },
    // },
    {
      prop: "enable",
      label: "是否启用",
      required: true,
      as: "switch",
      options: {
        activeValue: 1,
        inactiveValue: 0,
      },
    },
    // {
    //   prop: "isCollectingImages",
    //   label: "是否采集图像",
    //   required: false,
    //   as: "switch",
    //   options: {
    //     activeValue: 1,
    //     inactiveValue: 0
    //   },
    // },
    // {
    //   prop: "collectingImages",
    //   label: "采集图像",
    //   required: false,
    //   span: 24,
    //   as: "select",
    //   options: {
    //     loadMethod: () =>
    //       $api.dict.item.listAsOptions("image_acquisition_method"),
    //   },
    // },
  ];

  const editProps: EditFormProps = {
    model: editingObj.value,
    items: formItems,
    columns: 2,
    size: "middle",
    loading: loadingMap.save,
    onClose: () => {
      editingObj.value = null;
    },
    onCancel: () => {
      editingObj.value = null;
    },
    onValidate: (model: any) => {
      request("save", model);
    },
    dialog: true,
  };

  return editProps;
});

const onPageActions = (action: IAction, model?: any) => {
  switch (action.event) {
    case "add":
    case "edit":
      editingObj.value = $api.pacs.checkEquipment.$$createEntity(model);
      break;
    case "destroy":
      request("destroy", model ? model.id : "");
      break;
  }
};
</script>

<style lang="less" scoped></style>
